<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>查找-90专属LayIm</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="/Public/Swoole/layui/css/layui.css" media="all">
    <style type="text/css">
    #friend {
        width: ;
    }
    
    .layim-members-list {
        position: relative;
        width: ;
        padding: 10px 10px 0;
        border: 0px solid #D9D9D9;
        background-color: #fff;
        background-color: rgba(255, 255, 255, .9);
        box-shadow: none;
        overflow: hidden;
        font-size: 0
    }
    
    .friend-li {
        display: block;
        vertical-align: top;
        font-size: 14px;
        width: 100%;
        height: 48px;
        margin: 10px 0;
        cursor: pointer;
        float: left;
        width: 25%;
    }
    
    .friend-li img {
        width: 48px;
        height: 48px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        float: left;
        margin-right: 20px;
    }
    
    .friend-li img:hover {
        border: 1px solid rgb(63, 221, 134);
    }
    
    .friend-li p {
        text-align: left;
        margin: 0;
    }
    
    .friend-li .layui-icon {
        font-size: 14px;
    }
    
    .friend-li p.remark {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .layui-form-area {
        width: 410px;
    }
    
    .group {
        height: 35px;
        width: 410px;
    }
    
    #up-remark {
        width: 190px;
        border-radius: 2px;
        border: 1px solid #CCC;
        height: 22px;
        padding-left: 5px;
    }
    
    .layim-status-check {
        color: #0F3;
        padding-left: 15px;
        font-size: 14px;
        cursor: pointer
    }
    
    #friendpage {
        margin: 10px auto;
        text-align: center;
    }
    
    .layim-status-haoyouqingqiu {
        color: #fff;
    }
    
    .layim-status-male {
        color: #aacce2;
    }
    
    .layim-status-female {
        color: #e5bcc3;
    }
    
    .friend-user-add {
        background-color: #68ade4;
        color: #fff;
        padding: 2px 4px;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        font-size: 12px;
    }
    
    #LAY_layimGroup {
        width: 70%;
        margin-bottom: 10px;
    }
    #friend-group-add{
        color: #2e8ded;
        cursor: default;
    }
    </style>
</head>

<body>
    <div class="layui-tab" style="margin-top:-1px">
        <ul class="layui-tab-title" style="left: 0px;">
            <li class="layui-this">找人</li>
            <li class="">找群</li>
        </ul>
        <div class="layui-tab-content">
            <!--人-->
            <div class="layui-tab-item layui-show">
                <div id="friend">
                    <ul class="layim-members-list" id="LAY_view">
                    </ul>
                    <div id="LAY_page"></div>
                </div>
            </div>
            <!--群-->
            <div class="layui-tab-item">2</div>
        </div>
    </div>
    <textarea title="消息模版" id="LAY_tpl" style="display:none;">
        {{# layui.each(d.data, function(index, item){ }}
        <li class="friend-li">
            <img src="{{item.avatar}}">
            <p>{{item.username}} {{# if(item.status==2){ }}
                <span class="layui-icon layim-status-online">&#xe617;</span> {{# }else{ }}
                <span class="layui-icon layim-status-hide">&#xe60f;</span> {{# } }}
            </p>
            <p>
                {{# if(item.gender=='男'){ }}
                <span class="layui-icon layim-status-male">&#xe612;</span> {{# }else{ }}
                <span class="layui-icon layim-status-female">&#xe612;</span> {{# } }}
                <span>一起PHP</span>
                <button data-id="{{item.userid}}" data-avatar="{{item.avatar}}" data-status="{{item.status}}" data-username="{{item.username}}" data-sign="{{item.sign}}" data-type="notice" class="friend-user-add"><span class="layui-icon layim-status-add">&#xe608;</span>添加</button>
            </p>
        </li>
        {{# }); }}
    </textarea>
    <script src="/Public/Swoole/layui/layui.js"></script>
    <script>
    layui.use(['layim', 'laypage', 'form', 'element'], function() {
        var layim = layui.layim,
            $ = layui.jquery,
            layer = layui.layer,
            laytpl = layui.laytpl,
            laypage = layui.laypage,
            form = layui.form,
            islogin = 0,
            userdata = {};
        // form.checkbox();
        // form.select();

        //展示非好友的列表
        function getuserjons(curr) {
            $.post('./ajax_get_user_list', {
                curr: curr
            }, function(res) {
                // 这里处理 res.lists 中的数据内容，使用 html() 方法显示
                // 略……
                if (res.code == 0) {
                    if(res.data){
                        var html = laytpl(LAY_tpl.value).render({
                            data: res.data
                        });
                        $('#LAY_view').html(html);
                    }else{
                        $('#friend').html('暂无好友');
                        return;
                    }
                    
                } else {
                    alert('laychat服务端返回失败：' + res.msg);
                }
                //显示分页
                laypage.render({
                  elem: 'LAY_page',
                  limit: res.pagesize,
                  count: res.count,
                  curr: res.nowpage, //获取起始页
                  layout:   ['count' ,'prev', 'page', 'next', 'skip', ],
                  jump: function(obj, first) { //触发分页后的回调(单击页码后)
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            getuserjons(obj.curr); // (被单击的页码)
                        }
                    }
                });          
                // laypage({
                //     cont: 'LAY_page', // 容器
                //     pages: res.allpage, // 总页数(后台的)
                //     curr: res.nowpage, //当前页(后台获取到的)
                //     groups: 3,
                //     // first: false,
                //     // last: false,
                //     jump: function(obj, first) { //触发分页后的回调(单击页码后)
                //         if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                //             getuserjons(obj.curr); // (被单击的页码)
                //         }
                //     }
                // });
            }, 'json');


        }
        getuserjons();


        //获取分组列表
        var groupidoption = '';
        $.post("./ajax_get_group_list?dopost=list", function(res) {
            if(res.code == 0){
                for (var key in res.data) {
                    groupidoption += '<option value="' + res.data[key].gid + '">' + res.data[key].gname + '</option>';
                }

                //添加好友列表
                $(document).on("click", ".friend-user-add", function() {
                    var addlistdata = $(this).data(),
                        sendres = {};
                    sendres['mine'] = parent.layui.layim.cache().mine;
                    var index = layer.open({
                        type:1,
                        title: ['添加好友'],
                        closeBtn: 0,
                        area: '430px',
                        shade: !1, resize: !1,
                        content: '<div class="layim-add-box"><div class="layim-add-img"><img class="layui-circle" src="'+addlistdata['avatar']+'"><p>'+addlistdata['username']+'</p></div><div class="layim-add-remark"><select class="layui-select group" id="LAY_layimGroup">'+groupidoption+'</select> <span id="friend-group-add">新建分组</span><textarea id="Refused" placeholder="验证信息" class="layui-textarea"></textarea></div></div>',
                        //content: '<div class="layui-form-li"><div class="layui-form-label layui-form-area"><label>申请理由</label><textarea required="" name="content" id="Refused"></textarea></div><div class="layui-form-label layui-form-area"><label>添加到分组</label><select required="" name="groupid" class="input group">' + groupidoption + '</select></div></div>',
                        btn: ['确认', '取消'],
                        yes: function(index) {
                            sendres['mine']['content'] = $("#Refused").val();
                            addlistdata['name'] = addlistdata['username'];
                            sendres['to'] = addlistdata;
                            //通知对方            

                            addlistdata['groupid'] = $(".group").find("option:selected").val();
                            addlistdata['content'] = sendres['mine']['content'];
                            console.log(addlistdata)
                            $.post("./ajax_add_friend_request", {
                                data: addlistdata
                            }, function(res) {
                                if(res.code == 0){
                                    parent.laychat.socket.send(JSON.stringify({"type":"add_friend_request", "to_userid":addlistdata.id}));
                                    layer.msg('申请已发送，请等待对方确认', {
                                        icon: 1
                                        ,shade: 0.5
                                    }, function(){
                                        layer.close(index);
                                    });
                                }
                            });
                            // //添加好友
                            // $.post("user/grouporfriend.php?dopost=agree", {
                            //     data: addlistdata
                            // }, function() {});
                            // layer.close(index);
                            // addlistdata['type'] = 'friend';
                            // parent.layim.addList(addlistdata);
                        }
                    });
                    $(document).on("click", "#friend-group-add", function() {
                        var index2 = layer.open({
                            type:1,
                            title: ['好友分组'],
                            closeBtn: 0,
                            area: '330px',
                            shade:  [0.8, '#393D49'], 
                            shadeClose : true,
                            resize: !1,
                            content: '<div class="" style="padding: 10px;"><label>分组名称</label><input type="text" class="layui-input" value="" id="groupname"><p>新建的分组, 在刷新页面后生效</p></div>',
                            btn: ['确认', '取消'],
                            yes: function(index) {
                                var groupname = $("#groupname").val();
                                if(!groupname){
                                    $("#groupname").focus();
                                    return
                                }
                                //添加分组
                                $.post("./ajax_add_friend_group", {
                                    groupname: groupname
                                }, function(res) {
                                    if(res.code == 0){
                                        var group_detail = res.data;
                                        //添加到现有分组
                                        $("#LAY_layimGroup").append("<option value='"+group_detail['id']+"' selected>"+group_detail['groupname']+"</option>");
                                        groupidoption += "<option value='"+group_detail['id']+"'>"+group_detail['groupname']+"</option>";
                                        //var html = '<li><h5 layim-event="spread" lay-type="true"><i class="layui-icon"></i><span>我的好友</span><em>(<cite class="layim-count"> 0</cite>)</em></h5><ul class="layui-layim-list layui-show"><li class="layim-null">该分组下暂无好友</li></ul></li>';
                                        //添加分组到面板
                                        parent.laychat.addGroup(res.data);

                                    }
                                    layer.close(index2);
                                });
                            }
                        });
                    });
                    
                });
            }
            
        }, 'json');

        

    });
    </script>
</body>

</html>
